<template>
  <div>
    <el-card class="box-card">
      <span style="font-size: 12px; color: pink;">说明：目前支持学科和关键字条件筛选</span>
      <el-button @click='questions' type="success" icon="el-icon-edit" size='small'>新增试题</el-button>
      <el-row>
        <el-form :inline="true" :model="lists" ref="ruleForm" class="demo-form-inline">
          <el-form-item label="学科" label-width="80px" prop="subjectID">
            <el-select @change="simpless(lists.subjectID)" v-model="lists.subjectID" placeholder="请选择">
              <el-option v-for="item in list.subjectID" :key="item.value" :label=item.label :value=item.value></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="二级目录" label-width="80px" prop="translation">
            <!-- translation -->
            <el-select v-model="lists.translation" placeholder="请选择">
              <el-option v-for="item in translation" :key="item.value" :label=item.label :value=item.value></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签" label-width="80px" prop="tags">
            <el-select v-model="lists.tags" placeholder="请选择">
              <el-option v-for="item in tags" :key="item.value" :label=item.label :value=item.value></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关键字" label-width="80px" prop="keyword">
            <el-input v-model="lists.keyword" placeholder="根据题干搜素"></el-input>
          </el-form-item>
          <el-form-item label="试题类型" label-width="80px" prop="questionType">
            <el-select v-model="lists.questionType" placeholder="请选择">
              <el-option v-for="item in list.questionType" :key="item.value" :label=item.label :value=item.value></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="难度" label-width="80px" prop="difficulty">
            <el-select v-model="lists.difficulty" placeholder="请选择">
              <el-option v-for="item in list.difficulty" :key="item.value" :label=item.label :value=item.value></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向" label-width="80px" prop="direction">
            <el-select v-model="lists.direction" placeholder="请选择">
              <el-option v-for="(item,index) in direction" :key="item" :label=item :value=index></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="录入人" label-width="80px" prop="creator">
            <el-select v-model="lists.creator" placeholder="请选择">
              <el-option v-for="item in list.creator" :key="item.id" :label=item.username :value=item.id></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题目备注" label-width="80px" prop="remarks">
            <el-input v-model="lists.remarks" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="企业简称" label-width="80px" prop="shortName">
            <el-input v-model="lists.shortName" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="城市" label-width="80px" prop="provinces">
            <el-col :span="11">
              <el-select @change="city" v-model="lists.provinces" placeholder="请选择">
                <el-option v-for="(item,index) in provinces" :key="item" :label=item :value=index></el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item class="citys" label-width="80px" prop="citys">
            <el-col style="margin-left: 15px;" :span="11">
              <el-select v-model="lists.citys" placeholder="请选择">
                <el-option v-for="(item,index) in citys" :key="item" :label=item :value=index></el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button @click="resetForm('ruleForm')" size='small'>清除</el-button>
            <el-button type="primary" @click="onSubmit" size='small'>搜索</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-tabs @tab-click="sousuos" v-model="activeName" type="card">
        <el-tab-pane label="全部" name="first"></el-tab-pane>
        <el-tab-pane label="待审核" name="second"></el-tab-pane>
        <el-tab-pane label="已审核" name="third"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
      </el-tabs>
      <el-alert :title="`数据一共有${counts}条`" type="info" show-icon :closable="false">
      </el-alert>
      <el-table :data="items" border style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="110">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="110">
        </el-table-column>
        <el-table-column prop="catalog" label="目录" width="110">
        </el-table-column>
        <el-table-column prop="questionType" label="题型" width="110">
          <template v-slot='slotProps'>
            <div v-if='slotProps.row.questionType==="1"'>单选</div>
            <div v-else-if='slotProps.row.questionType==="2"'>多选</div>
            <div v-else-if='slotProps.row.questionType==="3"'>简答</div>
          </template>
        </el-table-column>
        <el-table-column prop="question" label="题干" width="250">
          <template v-slot='slotProps'>
            <p v-html="slotProps.row.question"></p>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="200">
          <template v-slot='slotProps'>
            <p>{{slotProps.row.addDate | formatTime}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="110">
          <template v-slot='slotProps'>
            <div v-if='slotProps.row.difficulty==="1"'>简单</div>
            <div v-else-if='slotProps.row.difficulty==="2"'>一般</div>
            <div v-else-if='slotProps.row.difficulty==="3"'>困难</div>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="110">
        </el-table-column>
        <el-table-column prop="chkState" label="审核状态" width="110">
          <template v-slot='slotProps'>
            <div v-if='slotProps.row.chkState===1'>已审核</div>
            <div v-else-if='slotProps.row.chkState===2'>已拒绝</div>
            <div v-else-if='slotProps.row.chkState===0'>待审核</div>
          </template>
        </el-table-column>
        <el-table-column prop="chkRemarks" label="审核意见" width="110">
        </el-table-column>
        <el-table-column prop="chkUser" label="审核人" width="110">
        </el-table-column>
        <el-table-column prop="publishState" label="发布状态" width="110">
          <template v-slot='slotProps'>
            <div v-if='slotProps.row.publishState===1'>已上架</div>
            <div v-else-if='slotProps.row.publishState===0'>已下架</div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template v-slot='slotProps'>
            <el-button @click='detail(slotProps.row)' type="text" size="small" dialogVisible=true>预览</el-button>
            <el-button v-if="slotProps.row.chkState===0" type="text" size="small" @click=onSubmits(slotProps.row) dialogVisible=true>审核</el-button>
            <el-button v-else-if="slotProps.row.chkState===1" type="text" size="small" @click=onSubmits(slotProps.row) dialogVisible=true disabled>审核</el-button>
            <el-button v-else-if="slotProps.row.chkState===2" type="text" size="small" @click=onSubmits(slotProps.row) dialogVisible=true disabled>审核</el-button>
            <el-button v-if="slotProps.row.publishState===1" @click="toEdit(slotProps.row.id)" type="text" size="small">修改</el-button>
            <el-button v-else-if="slotProps.row.publishState===0" @click="toEdit(slotProps.row.id)" disabled type="text" size="small">修改</el-button>
            <el-button v-if="slotProps.row.publishState===0" @click="choicePublish(slotProps.row)" type="text" size="small">上架</el-button>
            <el-button v-else-if="slotProps.row.publishState===1" @click="choicePublish(slotProps.row)" type="text" size="small">下架</el-button>
            <el-button v-if="slotProps.row.publishState===1" @click="handleDelete(slotProps.row)" type="text" size="small">删除</el-button>
            <el-button v-else-if="slotProps.row.publishState===0" @click="handleDelete(slotProps.row)" disabled type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination @current-change="handleCurrentChange" background :total='counts' :current-page.sync="lists.page" :page-sizes=[5,10,15,20] :page-size="lists.pagesize" layout="prev, pager, next, sizes,jumper">
        </el-pagination>
      </div>
    </el-card>
    <el-dialog title="题目审核" :visible.sync="dialogVisible" width="30%">
      <template>
        <el-radio-group v-model="tanchuang.chkState">
          <el-radio :label='1'>通过</el-radio>
          <el-radio :label='2'>拒绝</el-radio>
        </el-radio-group>
        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="tanchuang.chkRemarks">
        </el-input>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="choiceCheck(tanchuang)">
          <span>确 认</span>
        </el-button>
      </span>
    </el-dialog>
    <el-dialog title="题目预览" :visible.sync="dialogVisible1" width="60%" :before-close="handleClose">
      <div>
        <el-row>
          <div class="first">
            <el-col :span="6">
              <span>【题型】:
                <span v-if='this.listz.questionType==="1"'>单选题</span>
                <span v-else-if='this.listz.questionType==="2"'>多选题</span>
                <span v-else-if='this.listz.questionType==="3"'>简答题</span>
              </span>
            </el-col>
            <el-col :span="6">
              <span>【编号】: {{this.listz.id}}</span>
            </el-col>
            <el-col :span="6">
              <span>【难度】:
                <span v-if='this.listz.difficulty==="1"'>简单</span>
                <span v-else-if='this.listz.difficulty==="2"'>一般</span>
                <span v-else-if='this.listz.difficulty==="3"'>困难</span>
              </span>
            </el-col>
            <el-col :span="6">
              <span>【标签】: {{this.listz.tags}}</span>
            </el-col>
          </div>
          <el-col :span="6">
            <span>【学科】:
              <span v-if='this.listz.subjectID===1'>java</span>
              <span v-else-if='this.listz.subjectID===4'>前端</span>
            </span>
          </el-col>
          <el-col :span="6">
            <span>【目录】:
              <span v-if='this.listz.catalogID===1'>java基础</span>
              <span v-else-if='this.listz.catalogID===2'>js基础</span>
              <span v-else-if='this.listz.catalogID===5'>Vue基础</span>
              <span v-else-if='this.listz.catalogID===6'>JavaWEB</span>
              <span v-else-if='this.listz.catalogID===7'>css基础</span>
            </span>
          </el-col>
          <el-col :span="6">
            <span>【方向】: {{this.listz.direction}}</span>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <div>【题干】:</div>
        <p v-html="listz.question"></p>
        <div v-if='this.listz.questionType==="1"'>
          <div>单选题 选项: (以下选中的选项为正确答案)</div>
          <el-radio-group v-model="flag">
            <div class="danxuan" v-for="(item, index) in listz.options" :key="item.id">
              <el-radio :label=listz.options[index].isRight>{{listz.options[index].title}}</el-radio>
            </div>
          </el-radio-group>
        </div>
        <div v-else-if='this.listz.questionType==="2"'>
          <div>多选题 选项: (以下选中的选项为正确答案)</div>
          <el-checkbox-group v-model="checked">
            <div class="duoxuan" v-for=" (item, index) in listz.options" :key="item.id">
              <el-checkbox :label=listz.options[index].isRight>{{listz.options[index].title}}</el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
        <div v-else-if='this.listz.questionType==="3"'></div>
        <el-divider></el-divider>
        <div>【参考答案】:
          <el-button @click="answer" type="danger">
            视频答案预览
          </el-button>
        </div>
        <video v-if="video" :src="this.listz.videoURL" controls="controls" muted="muted" loop="loop"></video>
        <el-divider></el-divider>
        【答案解析】: <span class="hangneikuai" v-html="listz.answer"></span>
        <el-divider></el-divider>
        <div>【题目备注】: {{this.listz.remarks}}</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClose">关闭
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { choice, choicePublish, remove, choiceCheck, detail } from '@/api/hmmm/questions.js'
import { simple } from '@/api/hmmm/subjects.js'
import { simple as simples } from '@/api/base/users.js'
import { simple as simpless } from '@/api/hmmm/tags.js'
import { simple as simplesss } from '@/api/hmmm/directorys.js'
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
import { provinces, citys } from '@/api/hmmm/citys.js'

// 导入moment
import moment from 'moment'
export default {
  name: 'choice',
  data () {
    return {
      // 视频
      video: false,
      dialogVisible1: false,
      // 多选
      checked: [1],
      // 开关
      flag: 1,
      // 弹窗
      dialogVisible: false,
      activeName: 'first',
      lists: {
        // 页面大小
        pagesize: 5,
        // 当前页码
        page: 1,
        // 学科
        subjectID: null,
        // 关键字
        keyword: null,
        // 用户名
        creator: null,
        // 标签名称
        tags: null,
        // 题型
        questionType: null,
        // 难度
        difficulty: null,
        // 方向
        direction: null,
        // 省份
        provinces: null,
        // 城市
        citys: null,
        // 题目备注
        remarks: null,
        // 企业简称
        shortName: null,
        // 二级目录
        translation: null
      },
      // 查询
      list: {
        // 学科
        subjectID: '',
        // 关键字
        keyword: '',
        // 用户名
        creator: '',
        // 标签名称
        tags: '',
        // 题型
        questionType: questionType,
        // 难度
        difficulty: difficulty,
        // 方向
        direction: '',
        // 省份
        provinces: '',
        // 城市
        citys: '',
        // 题目备注
        remarks: '',
        // 企业简称
        shortName: '',
        // 二级目录
        translation: ''
      },
      // 二级目录
      translation: '',
      // 标签名称
      tags: [],
      // 省份
      provinces: provinces(),
      // 城市
      citys: citys(),
      // 方向
      direction: direction,
      // 总记录数
      counts: 0,
      // 列表
      items: [],
      // 题目
      title: {
        // 编号
        id: '',
        // 试题编号
        number: '',
        // 学科
        subjectID: '',
        // 目录
        catalogID: '',
        // 企业
        enterpriseID: '',
        // 省份
        province: {
          // 城市
          city: ''
        },
        // 方向
        direction: '',
        // 题型
        questionType: '',
        // 难度
        difficulty: '',
        // 题干
        question: '',
        // 解析视频
        videoURL: '',
        // 答案解析
        answer: '',
        // 题目备注
        remarks: {
          // 试题标签
          tags: ''
        },
        // 录入人
        creator: '',
        // 录入时间
        addDate: '',
        // 筛选状态 0 待审核 1 通过 2 拒绝
        chkState: '',
        // 审核人
        chkUser: '',
        // 审核日期
        chkDate: '',
        // 审核意见
        chkRemarks: '',
        // 上架(1)或下架(0)
        publishState: ''
      },
      // 弹窗
      tanchuang: {
        chkRemarks: '',
        chkState: 1,
        id: ''
      },
      // 题目预览
      listz: {
        // 题型
        questionType: '',
        // 编号
        id: '',
        // 难度
        difficulty: '',
        // 标签
        tags: '',
        // 学科
        subjectID: '',
        // 目录
        catalogID: '',
        // 方向
        direction: '',
        // 题干
        question: '',
        // 参考答案
        videoURL: '',
        // 答案解析
        answer: '',
        // 题目备注
        remarks: '',
        // 选项
        options: [{
          // 代码
          code: '',
          // 标题
          title: '',
          // 图片
          img: '',
          // 编号
          id: '',
          // 是否正确答案
          isRight: ''
        }]
      },
      tab: {
        // 页面大小
        pagesize: 5,
        // 当前页码
        page: 1
      },
      tab1: {
        // 页面大小
        pagesize: 5,
        // 当前页码
        page: 1,
        chkState: 0
      },
      tab2: {
        // 页面大小
        pagesize: 5,
        // 当前页码
        page: 1,
        chkState: 1
      },
      tab3: {
        // 页面大小
        pagesize: 5,
        // 当前页码
        page: 1,
        chkState: 2
      }
    }
  },
  methods: {
    handleCurrentChange (page) {
      this.lists.page = page
      this.choice()
    },
    async sousuos () {
      if (this.activeName === 'first') {
        try {
          // const ret = await choice(this.lists)
          const ret = await choice(this.tab)
          this.items = ret.data.items
          this.counts = ret.data.counts
          this.choice()
        } catch (error) {
          this.$message.error('获取学科列表失败')
        }
      } else if (this.activeName === 'second') {
        try {
          // const ret = await choice(this.lists)
          const ret = await choice(this.tab1)
          this.items = ret.data.items
          this.counts = ret.data.counts
        } catch (error) {
          this.$message.error('获取学科列表失败')
        }
      } else if (this.activeName === 'third') {
        try {
          // const ret = await choice(this.lists)
          const ret = await choice(this.tab2)
          this.items = ret.data.items
          this.counts = ret.data.counts
        } catch (error) {
          this.$message.error('获取学科列表失败')
        }
      } else if (this.activeName === 'fourth') {
        try {
          // const ret = await choice(this.lists)
          const ret = await choice(this.tab3)
          this.items = ret.data.items
          this.counts = ret.data.counts
        } catch (error) {
          this.$message.error('获取学科列表失败')
        }
      }
    },
    handleClose (done) {
      this.video = false
      this.dialogVisible1 = false
      done()
    },
    answer () {
      this.video = true
    },
    async detail (row) {
      // console.log(this.tab)
      this.dialogVisible1 = true
      try {
        // const { id, ...a } = row
        const ret = await detail(row)
        this.listz = ret.data
      } catch (error) {
        this.$message.error('获取试题失败')
      }
    },
    onSubmits (row) {
      this.tanchuang.chkRemarks = row.chkRemarks
      this.tanchuang.id = row.id
      this.dialogVisible = true
      // console.log(this.tanchuang)
    },
    async choiceCheck (row) {
      try {
        if (row.chkRemarks === null) {
          this.$message({
            message: '请输入审核意见',
            type: 'warning'
          })
          // 弹窗关闭
          // this.dialogVisible = true
          return
        } else {
          await choiceCheck({
            id: row.id,
            chkState: row.chkState,
            chkRemarks: row.chkRemarks
          })
          this.choice()
        }
      } catch (error) {
        this.$message.error('审核失败')
      }
      // 弹窗打开
      this.dialogVisible = false
    },
    handleDelete (row) {
      this.$confirm('此操作将永久删除该题组，是否继续？', '提示', {
        type: 'warning'
      }).then(async () => {
        await remove(row)
        this.choice()
      }).catch((e) => {
        if (e === 'cancel') {
          console.log('取消删除')
        } else {
          this.$message.error('删除组题失败')
        }
      })
    },
    toEdit (id) {
      this.$router.push('/questions/new?id=' + id)
    },
    choicePublish (row) {
      if (row.publishState === 0) {
        this.$confirm('您确认上架这道题目吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await choicePublish({
            id: row.id,
            publishState: 1
          })
          row.publishState = 1
          this.$message({
            type: 'success',
            message: '上架成功!'
          })
        }).catch((e) => {
          if (e === 'cancel') {
            this.$message({
              type: 'info',
              message: '已取消上架'
            })
          } else {
            this.$message.error('上架失败')
          }
        })
      } else if (row.publishState === 1) {
        this.$confirm('您确认下架这道题目吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await choicePublish({
            id: row.id,
            publishState: 0
          })
          row.publishState = 0
          this.$message({
            type: 'success',
            message: '下架成功!'
          })
        }).catch((e) => {
          if (e === 'cancel') {
            this.$message({
              type: 'info',
              message: '已取消下架'
            })
          } else {
            this.$message.error('下架失败')
          }
        })
      }
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    onSubmit () {
      // console.log(this.list)
      this.choice()
    },
    city () {
      this.citys = citys(this.provinces[this.lists.provinces])
      this.lists.citys = ''
    },
    async simpless (id) {
      try {
        const ret = await simpless({ subjectID: id })
        this.tags = ret.data
        this.lists.translation = ''
        const rets = await simplesss({ subjectID: id })
        this.translation = rets.data
        this.lists.tags = ''
        // console.log(rets)
      } catch (error) {
        this.$message.error('获取用户列表失败')
      }
    },
    async simples () {
      try {
        const ret = await simples()
        this.list.creator = ret.data
      } catch (error) {
        this.$message.error('获取用户列表失败')
      }
    },
    async simple () {
      try {
        const ret = await simple()
        // console.log(ret.data)
        this.list.subjectID = ret.data
      } catch (error) {
        this.$message.error('获取学科列表失败')
      }
    },
    async choice () {
      try {
        const ret = await choice(this.lists)
        this.items = ret.data.items
        this.counts = ret.data.counts
      } catch (error) {
        this.$message.error('获取精选题库失败')
      }
    },
    questions () {
      this.$router.push('/questions/new')
    }
  },
  created () {
    this.choice()
    this.simple()
    this.simples()
  },
  filters: {
    formatTime (time) {
      // 我们希望时间编程 XXXX年XX月XX日
      // const d = new Date(time)
      // return d.getFullYear() + '年' + (d.getMonth() + 1) + '月' + d.getDate() + '日'
      return moment(time).format('yyyy-MM-DD hh:mm:ss')
    }
  }
}
</script>
<style lang="scss" scoped>
.el-card {
  margin: 10px 10px 0px;
  .el-button--success {
    position: absolute;
    top: 15px;
    right: 30px;
  }
  ::v-deep .el-form {
    margin-top: 30px;
    .citys {
      position: absolute;
      right: 240px;
    }
    .el-col {
      text-align: right;
    }
    .el-button--default {
      position: absolute;
      top: 0;
      right: -10px;
    }
    .el-button--primary {
      position: absolute;
      top: 0;
      right: -80px;
    }
    .el-form-item__content {
      width: 220px;
    }
  }
}
.el-textarea {
  margin-top: 20px;
}
::v-deep .first {
  margin-bottom: 40px;
}
.danxuan {
  margin-top: 10px;
}
.duoxuan {
  margin-top: 10px;
}
video {
  margin-top: 40px;
  width: 400px;
}
.hangneikuai {
  display: inline-block;
}
.el-pagination {
  text-align: right;
  margin-top: 20px;
}
</style>
